<template>
	<view class="zh-storage-goods-detail">
		<view class="section">
			<view class="title">
				<text class="font-28 font-302D2D">{{ goodsDetailData.detail.spzs }}</text>
				<text :class="['tags-right',GoodsUpShelves.yes === goodsDetailData.detail.status?'shelve':'no-shelve']">{{GoodsUpShelves.yes === goodsDetailData.detail.status?"已上架":"待上架"}}</text>
			</view>
			<view class="display-flex flex-wrap justify-between mt-30">
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">批号</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.spbh }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">柜号</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.spgh }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">纱支</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.wpggA || '-' }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">用途</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.wpggD || '-' }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">品牌</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.spcd }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">产地</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.wpggE || '-' }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">工艺</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.wpggB || '-' }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">工序</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.wpggC || '-' }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">漂染性</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.wpggF || '-' }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">颜色</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.wpggH || '-' }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">件重</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.spjsl}}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">件数</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.spjs }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">重量</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.spsl }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">备注</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.spbz || '无' }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">城市</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.sheng +  goodsDetailData.detail.shi}}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">仓库</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.spckmc }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">库位</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.ckcw }}</text>
				</view>
				<view class="font-26 fill-width-50 mt-20">
					<text class="font-999">条码</text>
					<text class="font-302D2D ml-20">{{ goodsDetailData.detail.sptm }}</text>
				</view>
			</view>
		</view>
		<view class="form">
			<u-form ref="formRef">
				<!-- <u-input title="所属品类" placeholder="请录入所属品类" labelWidth="160" v-model="goodsDetailData.detail.spzs"></u-input> -->
				<u-input title="价格" placeholder="请录入价格" labelWidth="160" v-model="goodsDetailData.detail.price" :digit="Digit.amount" type="digit">
					<template v-slot:icon>
						<view>
							<text class="font-28">元</text>
						</view>
					</template>
				</u-input>
				<u-input type="digit" title="上架件数" placeholder="请录入上架件数" labelWidth="160" v-model="goodsDetailData.detail.upShelvesNum" :rules="goodsDetailData.rules.upShelvesNum">
					<template v-slot:icon>
						<view>
							<text class="font-28">件</text>
						</view>
					</template>
				</u-input>
				<u-select title="上架重量" :value="getWeight +'吨'" labelWidth="160" :arrow="false"></u-select>
				<u-input type="digit" title="起售重量" placeholder="请录入起售重量" labelWidth="160" v-model="goodsDetailData.detail.startingWeight" :rules="goodsDetailData.rules.startingWeight">
					<template v-slot:icon>
						<view>
							<text class="font-28">吨</text>
						</view>
					</template>
				</u-input>
				<view class="des">
					<view class="font-28 font-bold mt-30">
						<text>货物描述</text>
					</view>
					<textarea class="text-area" v-model="goodsDetailData.detail.remark"></textarea>
				</view>
				<u-upload title="货物图片" :max="6" text="点击上传" :urls="getFiles" @click="uploadFile" @delOne="delFile" @clickItem="clickFile"></u-upload>
			</u-form>
		</view>
		<view class="display-flex justify-center align-center mt-60">
			<button class="save-up" v-if="goodsDetailData.detail.status ==  GoodsUpShelves.no" @click="saveUp">保存并上架</button>
			<button class="save-up" v-if="goodsDetailData.detail.status ==  GoodsUpShelves.yes" @click="saveDown">下架</button>
			<button class="save" @click="save">保存</button>
		</view>
		<imgs-preview :imgs="generalImgs.fileImgs" :show="generalImgs.show" :current="generalImgs.index" @close="changeFileImgShow"></imgs-preview>
	</view>
</template>

<script setup lang="ts">
	import { goods, fileApi } from '@/api'
	import { tip, util, amount } from '@/utils'
	import { GoodsUpShelves } from '@/enum/goods'
	import { computed, reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { Digit } from '@/enum/digit'
	
	const formRef = ref()
	const goodsDetailData: any = reactive({
		rules:{
			upShelvesNum:[
				{required:true,message:'请录入上架件數！'},
				{max:0,message:'上架件数不能超过库存件数！'},
			],
			startingWeight:[
				{required:true,message:'请录入起售重量！'},
				{max:0,message:'起售重量不可大于上架重量！'},
			]
		},
		query:{
			spbhid:'',
			spckid:'',
			spcwid:''
		},
		detail:{},
	})
	
	const generalImgs:any = reactive({
		show:false,
		fileImgs:[],
		index:0
	})
	
	onLoad((options) => {
		goodsDetailData.query = options
		storageGoodsDetail()
	})
	
	const storageGoodsDetail = () => {
		goods.getStorageGoodsDetail(goodsDetailData.query).then((res:any) => {
			const data = res.data
			data.upShelvesNum = data.upShelvesNum?data.upShelvesNum:data.spjs
			goodsDetailData.rules.upShelvesNum[1].max = data.spjs
			goodsDetailData.detail = data
			generalImgs.fileImgs = res.data.fileDataList.map((item:any) => util.previewImg(item.url))
		})
	}
	
	const getFiles = computed(() => {
		const files:any = []
		if(goodsDetailData.detail.fileDataList) {
			goodsDetailData.detail.fileDataList.map((item:any) => {
				files.push(util.previewImg(item.url))
			})
		}
		return files
	}) 
	
	const getWeight = computed(() => {
		const data = goodsDetailData.detail
		const upShelvesWeight = amount.getWeight(data.upShelvesNum, data.spjsl)
		goodsDetailData.detail.upShelvesWeight = upShelvesWeight
		goodsDetailData.rules.startingWeight[1].max = upShelvesWeight
		return upShelvesWeight
	})
	
	const save = () => {
		if(!goodsDetailData.detail) return tip.showToast('没有货物信息')
		
		const form = goodsDetailData.detail
		const rules = goodsDetailData.rules
		formRef.value.validate(rules, form).then((data:any) => {
			if(Number(goodsDetailData.detail.upShelvesNum) === 0) return tip.showToast('上架件數不能为0')
			if(data === true) {
				goodsDetailData.detail.price = goodsDetailData.detail.price?goodsDetailData.detail.price:0
				goodsDetailData.detail.upShelvesNum = goodsDetailData.detail.upShelvesNum?goodsDetailData.detail.upShelvesNum:0
				goods.setUpShelves(goodsDetailData.detail).then((res:any) => {
					tip.showToast('保存成功！')
				})
			}
		})
	}
	
	const saveDown = () => {
		goodsDetailData.detail.status =  GoodsUpShelves.no
		goods.setUpShelves(goodsDetailData.detail).then((res:any) => {
			tip.showToast('下架成功！')
			uni.$emit('goodsSave')
			uni.navigateBack({delta:1})
		})
	}
	
	const saveUp = () => {
		if(!goodsDetailData.detail) return tip.showToast('没有货物信息')
		const form = goodsDetailData.detail
		const rules = goodsDetailData.rules
		formRef.value.validate(rules, form).then((data:any) => {
			if(Number(goodsDetailData.detail.upShelvesNum) === 0) return tip.showToast('上架件數不能为0')
			if(data === true) {
				goodsDetailData.detail.price = goodsDetailData.detail.price?goodsDetailData.detail.price:0
				goodsDetailData.detail.upShelvesNum = goodsDetailData.detail.upShelvesNum?goodsDetailData.detail.upShelvesNum:0
				goodsDetailData.detail.status =  GoodsUpShelves.yes
				goods.setUpShelves(goodsDetailData.detail).then(() => {
					tip.showToast('保存并上架成功！')
					uni.$emit('goodsSave')
					uni.navigateBack({delta:1})
				})
			}
		})
	}
	
	const uploadFile = (data: any) => {
		const fileQuery = {
			id:'',
			url:data.url,
			originalfilename:data.name,
			parentid:goodsDetailData.detail.id
		}
		fileApi.setFileAdd([fileQuery]).then(() => {
			getFilesList()
		})
	}
	
	const delFile = (index:number) => {
		const fileData = goodsDetailData.detail.fileDataList
		const id = fileData[index].id
		fileApi.setFileDel({id:id}).then(() => {
			getFilesList()
			tip.showToast('删除图片成功')
		})
	}
	
	const getFilesList = () => {
		fileApi.getFiles([goodsDetailData.detail.id]).then((res:any) => {
			goodsDetailData.detail.fileDataList = res.data
			generalImgs.fileImgs = res.data.map((item:any) => util.previewImg(item.url))
		})
	}
	
	const clickFile = (index:number) => {
		generalImgs.index = index
		changeFileImgShow()
	}
	
	const changeFileImgShow = () => {
		generalImgs.show = !generalImgs.show
	}
	
</script>

<style lang="scss" scoped>
	.zh-storage-goods-detail {
		padding-bottom:120rpx;
		.section {
			background-color:$uni-bg-card-color;
			padding:30rpx;
			.title {
				.tags-right {
					width:53rpx;
					height: 18rpx;
					box-sizing:border-box;
					text-align:center;
					font-size:18rpx;
					line-height:16rpx;
					margin-left: 10rpx;
				}
				.shelve {
					border:1rpx solid #1769FF;
					background-color: #EFF6FF;
					color:#1769FF;
				}
				.no-shelve {
					border:1rpx solid #FF661B;
					background-color:#FFF7EF;
					color:#FF661B;
				}
			}
		}
		.form {
			background-color:$uni-bg-card-color;
			padding:30rpx 0;
			.des {
				.text-area {
					margin-top:30rpx;
					border:1rpx solid $uni-border-color;
					border-radius: 8rpx;
					padding:10rpx 20rpx;
					font-size:28rpx;
				}
			}
		}
		.save {
			width: 324rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #fff;
			border-radius: 10rpx;
			font-size:30rpx;
			text-align:center;
		}
		.save-up {
			width: 324rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(90deg, #1769FF, #3795FF);
			border-radius: 10rpx;
			color:#fff;
			font-size:30rpx;
			text-align:center;
		}
	}
</style>
